<template>
  <div class="big-page">
    <page-header menu="SmartBuilding"></page-header>
    <div class="show-layout">
      <div class="pager pager-left" :class="{'hide': page === 1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <div class="search-wrapper" v-if="page===1"></div>
          <div class="search-wrapper" v-if="page===2"></div>
          <div class="search-wrapper" v-if="page===3"></div>
          <div class="search-wrapper" v-if="page===4"></div>
          <common-chart :chart-type="'pie'" size="big" :data="chart1" v-if="page===1"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart2" v-if="page===2"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart3" v-if="page===3"></common-chart>
        </div>
      </div>
      <div class="pager pager-right" :class="{'hide': page===3}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>

</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
export default {
  name: 'SmartBuilding',
  data () {
    return {
      page: 1,
      title: '智慧楼宇',
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartBuilding', id: '511' },
        title: '中心教学楼建筑各单位组成',
        series: [],
        tooltip: [],
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartBuilding', id: '511' },
        title: '单位房屋面积',
        xAxis: [],
        series: [],
        legend: []
      },
      chart3: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartBuilding', id: '511' },
        title: '人均面积',
        xAxis: [],
        series: [],
        legend: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '5' } })
    },
    init () {
      if (this.page === 1) {
        this.getChart1()
      } else if (this.page === 2) {
        this.getChart2()
      } else if (this.page === 3) {
        this.getChart3()
      }
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 3) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    },
    async getChart1 () {
      this.page = -1
      setTimeout(() => {
        this.page = 1
        this.chart1.title = '中心教学楼建筑各单位组成'
        this.chart1.legend = ['机关', '网安学院', '计算机学院', '物理学院', '数学学院']
        this.chart1.series = [
          {
            name: '维修类别',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '55%'],
            tooltip: {
              trigger: 'item',
              formatter: '{b}:{c}\n({d}%)'
            },
            label: {
              show: true,
              textStyle: { color: '#fff', fontSize: 18 },
              formatter: '{b}:{c}\n({d}%)'
            },
            data: [
              { value: 1048, name: '机关', itemStyle: { color: '#FF8955' } }, { value: 735, name: '网安学院', itemStyle: { color: '#FFD200' } },
              { value: 580, name: '计算机学院', itemStyle: { color: '#EB811A' } }, { value: 484, name: '物理学院', itemStyle: { color: '#FF5454' } },
              { value: 300, name: '数学学院', itemStyle: { color: '#0120EB' } }
            ]
          }
        ]
      }, 200)
    },
    async getChart2 () {
      this.page = -1
      setTimeout(() => {
        this.page = 2
        this.chart2.title = '单位房屋面积'
        this.chart2.xAxis = [
          { data: ['机关', '网安学院', '计算机学院', '物理学院', '数学学院'] }
        ]
        this.chart2.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#02BBFF',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [300.0, 460.9, 360.0, 553.2, 615.6]
        }]
      }, 200)
    },
    async getChart3 () {
      this.page = -1
      setTimeout(() => {
        this.page = 3
        this.chart3.title = '人均面积'
        this.chart3.xAxis = [
          { data: ['机关', '网安学院', '计算机学院', '物理学院', '数学学院'] }
        ]
        this.chart3.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#02BBFF',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [24.0, 15.9, 22.0, 12.2, 26.6]
        }]
      }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
.big-page {
  :deep(.el-input) {
    background-color: rgba(255, 255, 255, 0);
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0);
      border-color: rgba(255, 255, 255, 0);
      color: #fff;
    }
  }
}

</style>
